<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生成绩表</title>
</head>
<body>
<!--
table标签: 表示表格 是一个容器,它里面会包含其他标签
    border属性: 表格的边框
    cellspacing: 单元格之间的间距
    cellpadding: 内容到边框的距离

tr标签: 表示一行,也是一个容器,包含其他标签 table row
th标签: 表示列标题,会加粗居中 table header
td标签: 表示普通的单元格
    align:
        加在td上,这个单元格居中
        加在tr上,这行居中
        加在table,table自己在网页中居中

    rowspan: 跨几行
    colspan: 跨几列  column

caption标签: 表格标题
thead,tbody,tfoot 是不可见的,多表格进行逻辑划分.方便后续的操作
-->
<table border="1px" align="center" width="600" cellspacing="0px" cellpadding="10px">
    <caption>学生成绩表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>成绩</th>
    </tr>
    <tbody align="center">
        <tr>
            <td>100</td>
            <td>潘金莲</td>
            <td>女</td>
            <td>80</td>
        </tr>
        <tr>
            <td>200</td>
            <td>武大郎</td>
            <td>男</td>
            <td rowspan="2">90</td>
        </tr>
        <tr>
            <td>300</td>
            <td>红太狼</td>
            <td>女</td>

        </tr>
    </tbody>
    <tr align="center">
        <td>总成绩</td>
        <td colspan="3">900</td>
    </tr>
</table>

</body>
</html>